<template>
    <div>
        <Modal v-model="modalSwitch" width="700">
            <p class="modal-title" slot="header">
                <span>选择核销人员</span>
            </p>
            <div class="select-modal">
                <Input search v-model="searchVal" size="large" enter-button="搜索" placeholder="请输入用户ID" @on-search="initFn(1,searchVal)" />
                <Table class="table-div" :columns="columnsData" :loading="loading" :data="userList.users" height="300"></Table>
                <div class="page-container disFlex Flex-right">
                    <Page show-elevator :total="allPage*20" :page-size="20" @on-change="changePageFn" />
                </div> 
                <div v-show="hasClickArray.length != 0" class="hasSelect">
                    <div class="user-list">
                        <div class="img" v-for="(item,index) in hasClickArray">
                            <img :src="item.datum_headimg">
                            <div class="close disFlex Flex-middle Flex-center" @click="delUserFn(index)">×</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="disFlex Flex-center" slot="footer">
                <Button type="primary" size="large" @click="commitPeopleFn">确定</Button>
            </div>
        </Modal>
    </div>
</template>

<style scoped lang="less">
.modal-title {
    text-align: center
}

.table-div {
    margin-top: 20px;
}

.hasSelect {
    width: 100%;
    margin-top: 10px;
    overflow-x: scroll;
    // padding-bottom: 20px;
    box-sizing: border-box;

    &::-webkit-scrollbar {
        width: 4px;
        height: 4px;
        background: transparent;
    }

    &::-webkit-scrollbar-thumb {
        border-radius: 5px;
        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        background: rgba(0,0,0,0.2);
    }

    .user-list {
        display: inline-block;
        white-space: nowrap;
        

        .img {
            width: 60px;
            height: 60px;
            padding: 5px;
            box-sizing: border-box;
            border-radius: 3px;
            border: 1px solid #ddd;
            position: relative;
            top: 0;
            left: 0;
            margin-left: 10px;
            display: inline-block;

            &:nth-of-type(1) {
                margin-left: 0;
            }

            img {
                position: relative;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
            }

            .close {
                width: 15px;
                height: 15px;
                background: #2d8cf0;
                color: #fff;
                position: absolute;
                top: 0;
                right: 0;
                z-index: 2;
                cursor: pointer;
            }
        }
    }
}

/*分页*/
.page-container {
    padding: 10px;
    background: #fff;
}
</style>

<script>
    // import {shopUserList} from 'api/shop'

    export default {
        name: 'cancellationPeopleModal',
        data () {
            return {
                // 弹窗开关
                modalSwitch: false,

                // 表格开关
                loading: true,

                columnsData: [
                    {
                        title: '编号', 
                        align: 'center',
                        width: 90,
                        render: (h, params) => {
                            return h('span', {
                            }, params.row.wechat_user_id);
                        }
                    },
                    {
                        title: '名称',
                        render: (h, params) => {
                            return h('span', {
                            }, params.row.datum_nickname);
                        }
                    },
                    {
                        title: '头像',
                        render: (h, params) => {
                            return h('img', {
                                attrs: {
                                    src: params.row.datum_headimg,
                                    alt: '',
                                },
                                style: {
                                    width: '60px',
                                    height: '60px',
                                },
                            },'');
                        }
                    },
                    {
                        title: '操作',
                        width: 100,
                        align: 'center',
                        render: (h, params) => {
                            let hasIndex = this.hasClickArray.findIndex(item => item.wechat_user_id == params.row.wechat_user_id) 
                            let _type,_str;
                            if(hasIndex >= 0){
                                _type = 'default'
                                _str = '取消'
                            }else {
                                _type = 'primary'
                                _str = '选择'
                            }
                            return h('Button', {
                                props: {
                                    type: _type,
                                    size: 'large',
                                },
                                style: {
                                    marginRight: '5px'
                                },
                                on: {
                                    click: () => {
                                        if(hasIndex >= 0){
                                            this.hasClickArray.splice(hasIndex,1)
                                        }else {
                                            let obj = {
                                                datum_headimg: params.row.datum_headimg,
                                                datum_nickname: params.row.datum_nickname,
                                                wechat_user_id: params.row.wechat_user_id,
                                            }
                                            this.hasClickArray.push(obj)
                                        }
                                    }
                                }
                            }, _str)
                        }
                    }
                ],

                // 所有用户列表
                userList: {
                    users: [],
                },

                // 已选用户列表
                hasClickArray: [],

                // 搜索值
                searchVal: '',

                // 总页数
                allPage: 1,

                // 回调事件数据
                evenData: null,
            }
        },
        mounted(){
            // 初始化
            this.initFn(1,this.searchVal)
        },
        methods: {
            // 初始化
            initFn(_page,_search,_open){

                // 请求参数
                let params = {
                    page: _page,
                    search: _search
                }
                // shopUserList(params).then(_data => {
                //     // 开启表格加载
                //     this.loading = false

                //     this.userList = _data.data

                //     // 总页数
                //     if(_page == 1){
                //         this.allPage = _data.data.pages
                //     }

                //     // 如果是打开重置
                //     if(_open){
                //         this.modalSwitch = true
                //     }

                //     // 重置滚动条
                //     Array.from(document.getElementsByClassName("ivu-table-body")).forEach((item,index) => {
                //         if(document.getElementsByClassName("ivu-table-body")[index].parentElement.parentElement.parentElement.className == 'select-modal'){
                //             document.getElementsByClassName("ivu-table-body")[index].scrollTop = 0
                //         }
                //     })
                // }).catch(_err => console.log(_err))
            },

            // 删除核销人员
            delUserFn(_index){
                this.hasClickArray.splice(_index,1)
            },

            // 切换分页
            changePageFn(_page){
                this.initFn(_page,this.searchVal)
            },

            // 确定
            commitPeopleFn(){
                let _array = JSON.parse(JSON.stringify(this.hasClickArray))
                let _evenData = JSON.parse(JSON.stringify(this.evenData))
                this.$emit('commitPeopleFn',_array,_evenData)
                this.searchVal = ''
                this.modalSwitch = false
            },

            // 打开
            openFn(_array,_obj){
                this.hasClickArray = JSON.parse(JSON.stringify(_array))
                this.evenData = _obj
                this.initFn(1,'',true)
            }
        }
    }
</script> 